<template>
	<view>
		<view class="headerbox">
			<view class="">
				卖家已退款
			</view>
			<view class="hb1">
				资金稍后会退还到您的账户
			</view>
		</view>

		<view class="box">
			<!-- 2 -->
			<view class="anyone">
				<view class="item2" v-for="i in 2">
					<view class="item2Left">
						<view class="">
							<image src="../../../static/publick.jpg" mode=""></image>
							<view class="item2Left1">火爆新品</view>
							<!-- <view class="item2Left2">
								<view class="">生产与</view>
								<view class="">2022-07-03</view>
							</view> -->
						</view>
					</view>
					<view class="item2Right">
						<view class="item2RightTop">
							<view class="t3">糖请给我请给我加一粒方糖请给我</view>
							<view class="k1">
								<!-- <view class="t3">￥50.00/包</view> -->
								<view class="t1">买五送一</view>
								<!-- <view class="t2">积分：5分</view> -->
							</view>
						</view>
						<view class="item2RightBottom">
							<view class="item2RightBottomLeft">×16851</view>
							<view class="item2RightBottomRight">小计：1642.00</view>
						</view>
					</view>
				</view>
				<view class="anyone2">
					<view class="anyone2Left">优惠券</view>
					<view class="anyone2right">
						<view class="youhuiquan">
							<text>满500-20</text>
							<image src="../../../static/xiaojiantou.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="anyone2">
					<view class="anyone2Left">实付款</view>
					<view class="anyone2money">
						￥1515.00
					</view>
				</view>
			</view>
			<view class="returnthing">
				<view class="returnjifen">
					<view class="jifens">
						积分退还
					</view>
					<view class="jifennum">
						积分：4512
					</view>
				</view>
				<view class="returnjifen returnm">
					<view class="jifens">
						共退款
					</view>
					<view class="jifennum">
						￥1515.00
					</view>
				</view>
			</view>
			
			<!-- <view class="item3">
				<view class="list">
					<view class="listLeft">金额</view>
					<view class="listRight">
						<view class="">￥3,458.00</view>
						<view class=""><uni-icons type="right" size="20"></uni-icons></view>
					</view>
				</view>
				<view class="list">
					<view class="listLeft">红包</view>
					<view class="listRight">
						<view class="">红包折扣-￥3,458.00</view>
						<view class=""><uni-icons type="right" size="20"></uni-icons></view>
					</view>
				</view>
				<view class="list">
					<view class="listLeft">积分</view>
					<view class="listRight">
						<view class="">红包折扣-￥3,458.00</view>
						<view class=""><uni-icons type="right" size="20"></uni-icons></view>
					</view>
				</view>
				<view class="list">
					<view class="listLeft">共退款</view>
					<view class="listRight">
						<view class="color">￥3,458.00</view>
						<view class=""><uni-icons type="right" size="20"></uni-icons></view>
					</view>
				</view>
			</view> -->
			<view class="bottombox">
				<view class="item3">
					<!-- <view class="list cc">
						<view class="listLeft">退款详情</view>
					</view> -->
					<view class="list cc">
						<view class="listLeft d1">退款原因：</view>
						<view class="listright">不喜欢鼠槌横扫爵</view>
					</view>
					<view class="list cc">
						<view class="listLeft">退款金额：</view>
						<view class="listright">￥154545</view>
					</view>
					<view class="list cc">
						<view class="listLeft">物流状态：</view>
						<view class="listright">已到货</view>
					</view>
					<view class="list cc last">
						<view class="listLeft">退款时间：</view>
						<view class="listright">2022-07-04</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
	.headerbox{
		padding: 50rpx 64rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		background-color: #F5AC4F;
		display: flex;
		align-items: flex-end;
		.hb1{
			margin-left: 10rpx;
			font-size: 24rpx;
		}
	}
	.d1{
		overflow:hidden;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:1;
	}
	.cc{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		
	}
.bottombox{
	padding-bottom: 100rpx;
	.item3 {
		padding: 30rpx;
		background: #ffffff;
		.list {
			display: flex;
			justify-content: flex-start; 
			margin-bottom: 38rpx;
			.listLeft {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}
			.listRight {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #000000;
				display: flex;
			}
		}
		.last{
			margin-bottom: 0;
		}
	}
}
.youhuiquan image{
	width: 18rpx;
	height: 30rpx;
	margin-left: 20rpx;
	margin-bottom: -6rpx;
}
.anyone {
	margin: 30rpx;
	background: #ffffff;
	padding: 30rpx;
	border-radius: 30rpx;
	.anyone2 {
		display: flex;
		justify-content: space-between;
		margin-top: 23rpx;
		font-size: 30rpx;
		font-weight: 800;
		font-family: PingFang SC;
		.anyone2Left {
			color: #000000; 
		}
		.anyone2money{
			color: #FF3535;
		}
	}
	.item2 {
		display: flex;
		margin-bottom: 20rpx;

		.item2Right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.item2RightTop {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #333333;
				// display: flex;
				display: inline-block;
				.t3 {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				.k1 {
					display: flex;
					.t1 {
						display: inline-block;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #ffffff;
						background-color: #f5ac4f;
						border-radius: 16rpx;
						padding: 3rpx;
						display: flex;
						padding: 6rpx 10rpx;
					}
					.t3 {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #999999 !important;
					}
					.t2 {
						display: inline-block;
						font-size: 24rpx;
						font-family: PingFang SC;
						color: #333333 !important;
					}
				}
			}
			.item2RightBottom {
				display: flex;
				justify-content: space-between;
				font-family: PingFang SC;
				font-weight: 800;
				.item2RightBottomLeft {
					font-size: 30rpx;
					color: #999;
				}
				.item2RightBottomRight {
					color: #333333;
					font-size: 30rpx;
				}
			}
		}
		.item2Left {
			margin-right: 31rpx;
			border-radius: 20rpx;
			// overflow: hidden;
			view {
				position: relative;
				image {
					border-radius: 20rpx;
					width: 252rpx;
					height: 208rpx;
				}
				.item2Left2 {
					position: absolute;
					top: 40%;
					left: 50%;
					color: #ffffff;
					text-align: center;
					font-size: 12px;
					align-items: center;
					transform: translate(-50%, -50%);
					// width: ;
					// transform: translateY(-50%);
				}
				.item2Left1 {
					position: absolute;
					top: 0;
					left: 0;
					background-color: #ff0000;
					border-radius: 25rpx 0rpx 25rpx 0rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #ffffff;
					padding: 7rpx;
				}
			}
		}
	}
}
		.returnthing{
			padding: 30rpx;
			margin: 0 auto;
			background-color: #fff;
			margin:  30rpx;
			border-radius: 30rpx;
			.returnjifen{
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;
			}
			.returnm{
				margin-top: 30rpx;
			}
		}


</style>
